<template>
	<view class="main" @touchstart="isShow=true" @touchend="changeShow()">
		<view class="page-head">
			<view class="page-head-view">平台担保，快捷安全，帮您找到中国好员工</view>
		</view>
		<view class="page-service">
			<text class="page-service-title-text">代招服务</text>
			<text class="page-service-askfor-text page-service-textfont">一、代招要求</text>
			<text class="page-service-askfor-item-text">代招人数需≥10人</text>
			<text class="page-service-textfont page-service-tryout-text">二、提供试工，不满意直接开除</text>
			<text class="page-service-tryout-item-text page-service-tryout-item-textfont">
				由平台进行招聘，所有员工会在统一时间段内进行开工，对雇员可以多维度进行观察，开工后30分钟内不满意可以免责开除，无需支付任何费用，让您找到称心舒心的中国好员工！
			</text>
			<text class="page-service-textfont page-service-assurance-text">三、平台担保结算，快捷安全无纠纷</text>
			<text class="page-service-tryout-item-textfont page-service-assurance-item-text">雇佣员工→员工工作→验收结算→双方评价</text>
			<text class="page-service-textfont page-service-safeguard-text">四、服务保障</text>
			<text class="page-service-tryout-item-textfont page-service-safeguard-item-text">
				1.所有员工100%实名认证；
				2.招募费用，安全有保障，未招募到人，全额退还；
				3.如有问题平台第一时间介入处理。
			</text>
			<text class="page-service-textfont page-service-servicecharge-item-text">五、服务费用清晰</text>
		</view>
		<view class="page-boss"></view>
		<view class="page-footer">
			<text class="page-service-title-text big-customer-info-title-style">大客户信息预留</text>
			<view class="big-customer-info-view">
				<view class="big-customer-info-view-item">
					<text>您的姓名</text>
					<view><input type="text" placeholder="请输入您的姓名" v-model="name" @input="isShow=true"/></view>
				</view>
				<view class="big-customer-info-view-item">
					<text>您的电话</text>
					<view><input type="text" placeholder="请输入您的电话" v-model="phone" @input="isShow=true"/></view>
				</view>
				<view class="big-customer-info-view-item-button" @click="postAdduservip(phone,name)">提 交</view>
			</view>
		</view>
		<view class="suspend-view-show">
			<view class="suspend-view-show-item" :class="{'anim-transX':isShow}" @click="isShowmodel(0)">
				<image src="http://images.linglinggong.net/bigCustomer/ph.png" mode="aspectFill"></image>电话
			</view>
			<view class="suspend-view-show-item" style="margin:20rpx 0;" :class="{'anim-transX1':isShow}"
				@click="isShowmodel(1)">
				<image src="http://images.linglinggong.net/bigCustomer/wc.png" mode="aspectFill"></image>微信
			</view>
			<view class="suspend-view-show-item" :class="{'anim-transX2':isShow}" @click="isOpenModal=true">
				<image src="http://images.linglinggong.net/bigCustomer/fenx.png" mode="aspectFill"></image>分享
			</view>
		</view>
		<!-- 分享弹框 -->
		<view class="share-modal" v-if="isOpenModal" @touchmove.stop.prevent>
			<view class="main">
				<image @click="isOpenModal=false" class="close" src="http://images.linglinggong.net/icon1/47.png"></image>
				<view>
					<view @click="handleShare('WXSceneSession')">
						<image src="http://images.linglinggong.net/icon1/57.png" mode="aspectFill"></image>
						<text>微信</text>
					</view>
					<view @click="handleShare('WXSenceTimeline')">
						<image src="http://images.linglinggong.net/icon1/58.png" mode="aspectFill"></image>
						<text>朋友圈</text>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		setAdduservip
	} from '../../../libs/unit.js'
	export default {
		data() {
			return {
				name: '',
				phone: '',
				isShow: false,
				timer: 0,
				kefu_phone: '',
				kefu_wechat: '',
				isOpenModal: false,
			}
		},
		methods: {
			changeShow() {
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					this.isShow = false
				}, 4000)
			},
			postAdduservip(phone, name) {
				if (phone == '' || name == '') {
					uni.showToast({
						title: '请完成填写信息',
						icon: 'none'
					})
				} else {
					setAdduservip(phone, name)
				}
			},
			isShowmodel(type) {
				uni.showModal({
					title: type == 0 ? '客服电话' : '客服微信',
					content: type == 0 ? '是否拨打电话了解更多？' : this.kefu_wechat,
					showCancel: true,
					confirmColor: '#4E9800',
					cancelText: '取消',
					confirmText: type == 0 ? '拨打' : '复制',
					success: res => {
						if (res.confirm) {
							// 用户点击确定
							switch (type) {
								case 0:
									this.call_phone()
									break;
								case 1:
									this.copy_wechat()
									break;
								default:
									break;
							}
						} else {}
					}
				})
			},
			//分享
			handleShare(scene) {
				console.log('分享场景', scene)
				uni.share({
					provider: "weixin",
					scene: scene,
					type: 0,
					href: 'http://bigcustomer.linglinggong.net',
					title: "大客户专属招聘",
					summary: "这里有义乌最优秀的员工，称心放心又省心！！！",
					imageUrl: 'http://images.linglinggong.net/FovByz9oRrP4wIPyrtiJJf-0cxwB',
					success: function(res) {
						// console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
						uni.showToast({
							title: '未登陆',
							icon: 'none'
						})
					}
				});
			},
			call_phone() {
				uni.makePhoneCall({
					phoneNumber: this.kefu_phone
				})
			},
			copy_wechat() {
				// #ifdef APP-PLUS
				uni.setClipboardData({
					data: this.kefu_wechat,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				})
				// #endif
				// #ifdef H5
				let input = document.createElement('input');
				input.setAttribute('readonly', 'readonly');
				input.setAttribute('value', this.kefu_wechat);
				document.body.appendChild(input);
				input.select()
				if (document.execCommand('copy')) {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					})
					document.body.removeChild(input)
					//success info
				}
				// #endif
			},
		},
		onLoad() {
			this.kefu_phone = uni.getStorageSync('property_list_by_type').telephone
			this.kefu_wechat = uni.getStorageSync('property_list_by_type').kefu_wechat
		},
		onReady() {
			if (uni.getSystemInfoSync().windowWidth > 950) {
				document.getElementsByClassName('main')[0].style.width = "375px"
				document.getElementsByClassName('main')[0].style.transformOrigin = "top"
				document.getElementsByClassName('main')[0].style.transform = "scale(2)"
			}
		},
	}
</script>

<style lang="less" scoped>
	.main {
		width: 750rpx;
		margin: 0 auto;
		overflow: hidden;
	}

	.page-head {
		height: 700rpx;
		background-image: url(http://images.linglinggong.net/bigCustomer/a_01.jpg);
		background-size: cover;
	}

	.page-service {
		height: 1057rpx;
		background-image: url(http://images.linglinggong.net/bigCustomer/a_02.jpg);
		background-size: cover;
	}

	.page-boss {
		height: 836rpx;
		background-image: url(http://images.linglinggong.net/bigCustomer/a_03.jpg);
		background-size: cover;
	}

	.page-footer {
		height: 697rpx;
		background-image: url(http://images.linglinggong.net/bigCustomer/a_04.jpg);
		background-size: cover;
	}

	.page-service-title-text {
		font-size: 36rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 79rpx;
		text-align: center;
		display: block;
		text-shadow: 0px 0px 4rpx rgba(0, 52, 32, 0.5);
	}

	.page-service-textfont {
		font-size: 28rpx;
		font-weight: 500;
		color: #FFFFFF;
	}

	.page-service-askfor-text {
		.page-service-textfont;
		line-height: 115rpx;
		margin: 0rpx 0 0 60rpx;
	}

	.page-service-askfor-item-text {
		display: block;
		font-size: 28rpx;
		font-weight: 400;
		color: #000000;
		line-height: 50rpx;
		margin: 0rpx 0 0 60rpx;
	}

	.page-service-tryout-text {
		margin: 0rpx 0 0 60rpx;
		line-height: 85rpx;
	}

	.page-service-tryout-item-textfont {
		font-size: 28rpx;
		font-weight: 400;
		color: #000000;
		line-height: 50rpx;
	}

	.page-service-tryout-item-text {
		margin: 10rpx 0 0 60rpx;
		display: block;
		width: 640rpx;
	}

	.page-service-assurance-text {
		margin: 0rpx 0 0 60rpx;
		line-height: 110rpx;
	}

	.page-service-assurance-item-text {
		display: block;
		margin: 0rpx 0 0 60rpx;
	}

	.page-service-safeguard-text {
		margin: 0rpx 0 0 60rpx;
		line-height: 95rpx;
	}

	.page-service-safeguard-item-text {
		display: block;
		margin: 20rpx 0 0 60rpx;
	}

	.page-service-servicecharge-item-text {
		margin: 0rpx 0 0 60rpx;
		line-height: 160rpx;
	}

	.big-customer-info-title-style {
		padding-top: 30rpx;
	}

	.big-customer-info-view {
		margin: 30rpx auto;
		height: 312rpx;
		width: 566rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.big-customer-info-view-item {
		width: 566rpx;
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		&>text {
			font-size: 30rpx;
			font-weight: 400;
			color: #111111;
			line-height: 72rpx;
		}

		&>view {
			width: 420rpx;
			height: 72rpx;
			background: #FFFFFF;
			border: 1rpx solid #D0D3DA;
			border-radius: 8rpx;

			&>input {
				height: 72rpx;
				margin-left: 20rpx;
				background: transparent;
			}
		}
	}

	.big-customer-info-view-item-button {
		width: 566rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #FF0000, #FF2400, #E60000);
		box-shadow: 0px 10rpx 30rpx 0px rgba(255, 0, 0, 0.5);
		border-radius: 44rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
		margin-top: 40rpx;
	}

	.suspend-view-show {
		width: 135rpx;
		height: 220rpx;
		position: fixed;
		right: 0;
		bottom: 260rpx;
	}

	.suspend-view-show-item {
		width: 135rpx;
		height: 60rpx;
		background-color: #006E43;
		border-radius: 50rpx 0 0 50rpx;
		display: flex;
		align-items: center;

		&>image {
			width: 40rpx;
			height: 40rpx;
			margin: 0 10rpx;
		}

		font-size: 28rpx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 60rpx;
	}

	.anim-transX {
		animation: 1s transX ease-out 0s 1;
		animation-fill-mode: forwards;
	}

	.anim-transX1 {
		animation: 1s transX ease-out 0.5s 1;
		animation-fill-mode: forwards;
	}

	.anim-transX2 {
		animation: 1s transX ease-out 1s 1;
		animation-fill-mode: forwards;
	}

	@keyframes transX {
		100% {
			transform: translateX(80rpx);
		}
	}

	.share-modal {
		z-index: 500;
		position: fixed;
		bottom: 0;
		height: 100vh;
		width: 100vw;
		background-color: rgba(0, 0, 0, 0.40);

		&>.mains {

			position: fixed;
			bottom: 40%;
			left: 11%;
			box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.05) inset;
			border-radius: 17px 17px 0 0;

			display: flex;
			flex-direction: column;
			align-items: center;


		}

		&>.main {
			position: fixed;
			bottom: 0;
			// padding: 30rpx;
			background: #FFFFFF;
			box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.05) inset;
			border-radius: 17px 17px 0 0;

			display: flex;
			flex-direction: column;

			// align-items: center;
			&>.close {
				position: absolute;
				right: 30rpx;
				top: 30rpx;
				width: 42rpx;
				height: 42rpx;
			}

			&>view {
				display: flex;
				width: 100vw;
				padding: 100rpx 0 80rpx;

				&>view {
					// border: 1px solid #000000;
					display: flex;
					flex: 1;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					&>image {
						width: 84rpx;
						height: 84rpx;
						margin-bottom: 20rpx;
					}
				}
			}
		}
	}
	.page-head-view {
		margin: 0 auto;
		width: 686rpx;
		height: 56rpx;
		background: #006E43;
		border: 4rpx solid #26151B;
		border-radius: 28rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		position: relative;
		top: 400rpx;
		text-align: center;
		line-height: 56rpx;
	}
</style>
